<!DOCTYPE html>
<html>
	<head>
		<title>CSS Reftest Reference</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<style>
		.outer-mixed-1 ul,
		.outer-mixed-1 ol {
			color: blue;
		}

		.outer-mixed-1 {
			padding: 0;
			margin: 0;
		}

		.region {
			margin: 2em;
			background-color: lightgray;
			width: 20em;
		}
		</style>
	</head>
	<body>
		<p>This test passes if there is a gray rectangle with two black lists in it, as described below.<br>
		The first black list is a bulleted list that has a blue numbered list in it.<br>
		The second black list is a numbered list that has two blue nested lists in it: the first nested list is a bulleted list with three items, and the second list is a numbered list with two items.</p>
		<p>The numbers and bullets for the black lists should be rendered outside the gray rectangle, while the blue list items should be indented. Also, the blue bulleted list should have a different type of bullets than the black bulleted list.</p>
		<div class="region" id="r1">
			<ul class="outer-mixed-1">
				<li>Unordered list, item 1
					<ol>
						<li>Inner ordered list, item 1</li>
						<li>Inner ordered list, item 2</li>
						<li>Inner ordered list, item 3</li>
					</ol>
				</li>
				<li>Unordered list, item 2</li>
			</ul>
			<ol class="outer-mixed-1">
				<li>Ordered list, item 1
					<ul>
						<li>Unordered inner list, item 1</li>
						<li>Unordered inner list, item 2</li>
						<li>Unordered inner list, item 3</li>
					</ul>
				</li>
				<li>Ordered list, item 2
					<ol>
						<li>Second inner ordered list, item 1</li>
						<li>Second inner ordered list, item 2</li>
					</ol>
				</li>
			</ol>
		</div>
	</body>
</html>